<!DOCTYPE html>
<html>
<head>
	<charset ="utf-8" />
	<title>银行信息管理</title>
</head>

<body class="setbackground">
<h1 style="text-align: center">个人银行</h1>
<div class="searchBox" id="search_box">
	<a id="search" type="button" onclick="searchFct()">余额查询</a>
	<br/><br/><br/><br/><br/><br/>
	<img src="image/timg.jpg" id="piggyBank" width="200" align="bottom">
	<p style="text-align: center">您的余额为：
		<input type="text" id="balance" value="0.0"></p>
</div>
<div class="transferBox" id="login_transfer">
	<a id="transfer" type="button" onclick="transferFct()">转账</a>
	<p class="transferTo">转账对象
		<input type="text" id="transferTo" name="transferTo" placeholder="请输入转账对象"></p>
	<p style="text-align: center">转账金额
		<input type="text" id="transferAmount" value="" placeholder="请输入转账金额"></p>
	<p style="text-align: center;">交易密码
		<input type="password" id="password" name="transferTo" placeholder="请输入交易密码"></p>
</div>


<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<script type="text/javascript">
function transferFct(){
	//需要验证交易密码
	alert("转账成功！");
}
function searchFct(){
	//gif动画
	var imgObj = document.getElementById("piggyBank");
	var Flag=(imgObj.getAttribute("src",2)=="image/timg.jpg")
	imgObj.src=Flag?"image/timg.gif":"image/timg.jpg";
}

</script>


<style type="text/css">
	body{background-color: #FF79BC}
	
	#search_box{ 
		margin-top:100px;
		margin-left: 600px; 
		height:40px;
	}
	#search_box a {
    	text-decoration:none;
		background:#4DFFFF;
		color:#5B4B00;
	
		padding: 50px 30px 50px 30px;
		font-size:32px;
		font-family: 微软雅黑,宋体,Arial,Helvetica,Verdana,sans-serif;
		font-weight:bold;
		border-radius:10px;
	
		-webkit-transition:all linear 0.30s;
		-moz-transition:all linear 0.30s;
		transition:all linear 0.30s;
	
	}
    #search_box a:hover { background:#385f9e; }

    #login_transfer{ 
		margin-top: 100px;
		margin-left: 7%; 
		height:40px;
	}
	#login_transfer a {
    	text-decoration:none;
		background:#4DFFFF;
		color:#5B4B00;
	
		padding: 50px 62px 50px 62px;
		font-size:32px;
		font-family: 微软雅黑,宋体,Arial,Helvetica,Verdana,sans-serif;
		font-weight:bold;
		border-radius:10px;
	
		-webkit-transition:all linear 0.30s;
		-moz-transition:all linear 0.30s;
		transition:all linear 0.30s;
	
	}
    #login_transfer a:hover { 
    	background:#385f9e; 
    }
    .searchBox{
        border: 10px solid black; 
        float: left;
        text-align: center;
        padding-left: 2%;
        padding-right: 2%;
        padding-bottom: 20%;
        padding-top: 5%;
        border-radius: 7px;
    }
    .transferBox{
        border: 10px solid blue; 
        float: left;
        text-align: center;
        padding-left: 2%;
        padding-right: 2%;
        padding-bottom: 20%;
        padding-top: 5%;
        border-radius: 7px;
    }
    .transferTo{
    	text-align: center;
    	margin-top: 100px;
    }
    


</style>
</body>
</html>